<template>
  <van-popup
    class="infoPopup"
    v-model:show="props.show"
    round
    :closeable="showType"
    close-on-popstate
    safe-area-inset-bottom
    :close-on-click-overlay="false"
    :style="{ width: 'calc(100vw - 100px)' }"
    @click-overlay="popupClose"
    @click-close-icon="popupClose"
  >
    <div>
      <div v-if="showType" class="box items-center">
        <div class="title">{{ $t("airdrop.jhm") }}</div>
        <van-field
          v-model="pageData.input"
          label=""
          :placeholder="$t('airdrop.qsr')"
          class="input"
          :class="{ inputbg: pageData.input.length > 0 }"
        />
        <!-- 需要 app 桥接 -->
        <!-- <img class="copy" src="/image/airdrop/copy.svg" @click.stop="copyUrl" /> -->
        <div class="footer">
          <div class="btn" @click.stop="confirm(1)">
            {{ $t("common.confirm") }}
          </div>
        </div>
      </div>
      <div v-else class="box items-center">
        <div class="titlebg">{{ $t("airdrop.gxkc") }}</div>
        <div class="box-box items-center">
          <img
            v-if="props.detail.isRedeemCOde"
            class="box-box-gh"
            src="/image/airdrop/box-gh-blue.svg"
          />
          <img
            v-else
            class="box-box-gh"
            src="/image/airdrop/box-gh-green.svg"
          />

          <img class="box-box-img" src="/image/airdrop/box.png" />
          <ClientOnly>
            <div class="box-box-bdc items-center">
              <img class="box-box-bdc-icon" src="/image/bdc.svg" />
              <CountTo
                class="box-box-bdc-text"
                :startVal="bdcStart"
                :endVal="bdcTotal"
                :duration="1500"
                :decimals="0"
                suffix="BDC"
                @callback="animationEnd"
              ></CountTo>
              <CountTo
                v-if="!pageData.animationBdcEnd"
                class="box-box-bdc-bs"
                :startVal="0"
                :endVal="bsEnd"
                :duration="1500"
                :decimals="1"
                @callback="() => animationEnd(1)"
              ></CountTo>
              <img
                v-if="!pageData.animationBdcEnd"
                class="box-box-bdc-bg"
                src="/image/airdrop/subtract-icon.svg"
              />
            </div>
          </ClientOnly>
        </div>
        <div class="footer">
          <div class="btn" @click.stop="confirmClick">
            {{ $t("common.confirm") }}
          </div>
        </div>
      </div>
    </div>
  </van-popup>
</template>
<script setup lang="ts" name="infoPopup">
// import { getChangeRecord } from "@/api/bdc";
import { ref, reactive, onMounted, computed } from "vue";
import { activateAirdropActivityBox } from "@/api/airdrop";
import { showToast } from "vant";
import { debounce } from "@/utils";
import { defineAsyncComponent } from "vue";
const CountTo = defineAsyncComponent(
  () => import("~/components/countTo/index.vue")
);

const { t } = useI18n();
const props = withDefaults(
  defineProps<{
    show: boolean;
    detail: any;
  }>(),
  {
    show: false,
    detail: {},
  }
);

const emit = defineEmits(["update:show", "refresh"]);

// 页面属性
const pageData = reactive({
  input: "",
  // 是否展示 开箱后的 bdc
  isShowType: false,
  // 请求获取的 最终bdc数值
  acquireAmount: 0,
  // 倍数-动画是否结束
  animationEnd: false,
  // bdc-动画是否结束
  animationBdcEnd: false,
});

// 是否展示宝箱数额
const showType = computed(() => {
  return props.detail.boxType == 2 && !pageData.isShowType;
});

// 开始-bdc数额
const bdcStart = computed(() => {
  return Number(props.detail.bonusAmount);
});

// 最终bdc数额
const bdcTotal = computed(() => {
  if (!pageData.animationEnd) {
    return Number(props.detail.bonusAmount);
  } else if (pageData.acquireAmount) {
    return Number(pageData.acquireAmount);
  } else {
    return Number(props.detail.sendAmount);
  }
});

// 最终-倍数
const bsEnd = computed(() => {
  return Number(props.detail.bonusRate);
});

/**
 * @description: 激活码-激活
 */
const activateAirdropActivityBoxRequest = (call?: any) => {
  // pageData.isShowType = true;
  const noSpacesStr = pageData.input.replace(/\s/g, ""); // 删除字符串中所有的空格
  activateAirdropActivityBox({
    boxId: props.detail.boxId,
    activationCode: noSpacesStr,
  })
    .then((res) => {
      if (res) {
        pageData.acquireAmount = res.acquireAmount;
        pageData.isShowType = true;
        emit("refresh");
      }
    })
    .finally(() => {
      call && call();
    });
};

const animationEnd = (val: number) => {
  if (val == 1) {
    nextTick(() => {
      pageData.animationEnd = true;
    });
  } else {
    if (pageData.animationEnd) {
      pageData.animationBdcEnd = true;
    }
  }
};
const copyUrl = async () => {
  try {
    // 原生获取方式
    const text = await navigator.clipboard.readText();
    if (!text) {
      showToast(t("mvp.other.jtbwk"));
    } else {
      pageData.input = text;
      showToast(t("mvp.other.ztcg"));
    }
  } catch (error) {
    console.log("--剪贴板报错:", error); // 一般都是没有权限
    showToast(t("mvp.other.bzcjtb"));
  }
};

watch(
  () => props.show,
  (newVal) => {
    if (newVal) {
      // 兼容兑换码页面使用这个弹窗的逻辑,不展示倍数
      if (props.detail.isRedeemCOde) {
        pageData.animationBdcEnd = true;
        animationEnd(1);
      }
    }
  }
);

onMounted(() => {});

// 关闭弹窗
const popupClose = () => {
  emit("update:show", false);
};

let isLxClick = false; // 是否连续点击
// 确认
const confirm = debounce(
  (val: any) => {
    if (val == 1) {
      if (pageData.input.length > 0) {
        isLxClick && showToast(t("common.wlycqcxjr"));
        activateAirdropActivityBoxRequest(() => {
          isLxClick = false;
        });
        isLxClick = true;
      } else {
        showToast(t("airdrop.qsrjhm"));
      }
    } else if (props.detail.isRedeemCOde) {
      emit("refresh");
      popupClose();
    } else {
      popupClose();
    }
  },
  2000,
  false
);

const confirmClick = debounce(
  (val: any) => {
    if (val == 1) {
    } else if (props.detail.isRedeemCOde) {
      emit("refresh");
      popupClose();
    } else {
      popupClose();
    }
  },
  100,
  false
);
</script>
<style lang="scss" scoped>
.infoPopup {
  .box {
    position: relative;
    z-index: 999999999;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(180deg, #e2f0ff 0%, #fffeff 63.85%);
    &-box {
      position: relative;
      justify-content: center;
      flex-direction: column;
      width: 240 * 2px;
      height: 177 * 2px;
      &-gh {
        position: absolute;
        top: -15px;
        left: 0;
      }
      &-img {
        margin-top: 10 * 2px;
        position: relative;
        z-index: 9;
        height: 100 * 2px;
      }
      &-bdc {
        position: relative;
        margin-bottom: 15 * 2px;
        margin-top: 15 * 2px;
        padding: 0 15 * 2px;
        z-index: 9;
        height: 28 * 2px;
        line-height: 28 * 2px;
        border-radius: 39px;
        border: 1px solid #fff;
        background: #daecff;

        &-icon {
          width: 18 * 2px;
          height: 18 * 2px;
          margin-right: 5 * 2px;
        }
        &-bg {
          position: absolute;
          top: 5px;
          right: 11 * 2px;
          width: 56 * 2px;
          // height: 30 * 2px;
        }
        &-text {
          color: #007bff;
          text-align: center;
          font-size: 17 * 2px;
          font-weight: 590;
        }
        &-bs {
          z-index: 9;
          width: 56 * 2px;
          color: #ffff94;
          text-align: center;
          font-size: 17 * 2px;
          font-weight: 700;
          margin-left: 20 * 2px;
        }
      }
    }
    .copy {
      position: absolute;
      top: 180px;
      right: 30px;
      padding: 15 * 2px;
      width: 20 * 2px;
      height: 20 * 2px;
    }
  }
  .title {
    padding: 20 * 2px 15 * 2px;
    color: #002853;
    text-align: center;
    font-size: 17 * 2px;
    font-weight: 590;
    margin-bottom: 32 * 2px;
  }

  .titlebg {
    width: 280 * 2px;
    height: 30 * 2px;
    line-height: 29 * 2px;
    margin: 15 * 2px 10 * 2px;
    color: #fcffc7;
    text-align: center;
    font-size: 17 * 2px;
    font-weight: 590;
    background-image: url("/image/airdrop/popup-title-blue-icon.svg");
    background-size: 100%;
    background-repeat: no-repeat;
  }

  .input {
    background: #f0f3fa;
    border-radius: 10 * 2px;
    width: calc(100% - 40 * 2px);
    margin-bottom: 57 * 2px;
  }

  .inputbg {
    background: #fff !important;
    border: 1px solid #007bff;
  }

  .footer {
    border-top: 2px solid rgba(0, 0, 0, 0.1);
    padding: 12 * 2px 15 * 2px;
    .btn {
      border-radius: 6 * 2px;
      background-color: #007bff;

      color: #fff;
      text-align: center;
      font-size: 15 * 2px;
      font-weight: 590;
      width: 265 * 2px;
      height: 36 * 2px;
      line-height: 36 * 2px;
    }
  }
}
</style>
